<template>
	<view class="message-bc">
		<!-- 系统通知 -->
		<!-- <view class="category" v-for="item in categories">
			<view class="category-icon">
				<uv-icon :name="item.icon" size="96rpx"></uv-icon>
			</view>
			<view class="category-right">
				<view class="category-title">
					{{item.title}}
				</view>
				<view class="category-content">
					{{item.content}}
				</view>
				<uv-line></uv-line>
			</view>

		</view> -->
		<view class="content">
			<uv-list>
			    <uv-list-item   v-for="item in conversations">
					<view class="content-item" @click="toContent(item.id)">
						<view class="item-avatar">
							<uv-avatar :src="api.FileById + item.receiverAvatar" size="96rpx"></uv-avatar>
						</view>
						<view class="item-right">
							<view class="item-title">
								{{item.receiverName}}
								
							</view>
							<view class="item-date">
								{{!item.lastUpdated.startsWith('0001-01-01')?item.lastUpdated.replace("T"," ").substr(0,16):''}}
							</view>
							<view class="item-content">
								{{item.lastMessage?.length>14?item.lastMessage.substr(0,14)+'......':item.lastMessage}}
							</view>
						</view>
					</view>
					<uv-line></uv-line></uv-list-item>
			</uv-list>
		</view>
		<c-tabbar></c-tabbar>
	</view>
</template>

<script setup>
	import api from './api';
	import {
		ref,onUnmounted,onMounted
	} from 'vue'
	import { useUserStore } from '@/stores/user';
	const userStore = useUserStore()
	const categories = ref([{
		title: '系统通知',
		content: '没有新的通知',
		icon: 'bell'
	}, {
		title: '互动消息',
		content: '没有新的互动',
		icon: 'chat'
	}])
	//连接
	// import { useSignalR } from '../../services/signalR.js'
	// const sR = useSignalR('notificationHub')
	// sR.start()
	// onUnmounted(()=>{
	// 	sR.stop()
	// })
	//获取会话列表
	const conversations = ref([])
	const getConversations = ()=>{
		api.getConversations().then(res=>{
			conversations.value = res.datas
			console.log(conversations.value);
			console.log(conversations.value[0].participantIds.filter(x=>x != userStore.userId)[0]);
		})
	}
		//跳转到会话详情
	const toContent = (id)=>{
		uni.navigateTo({
			url:'/pages/message/message?id='+id
		})
	}
import { onShow } from '@dcloudio/uni-app'
onShow(() => {
  console.log('触发页面显示刷新')
  getConversations()
})
	onMounted(async ()=>{
		getConversations()
		const signalR = useSignalRStore()
		signalR.start()
		signalR.on("ReceiveMessage",res=>{
			getConversations()
		})
	})
	onUnmounted(() => {
	})
	
	
	import { useSignalRStore } from '../../stores/signalRStore.js'
	
	
	
</script>

<style lang="scss">
	.message-bc {
		padding: 30rpx;
		.content{
			.content-item{
				display: flex;
				padding-bottom: 20rpx;
				.item-right{
					padding-left: 20rpx;
					.item-date{
						position: absolute;
						    right: 20rpx;
						    top: 10rpx;
						    font-size: 24rpx;
						    color: #666;
					}
					.item-content{
						font-size: 28rpx;
						    color: #555;
					}
				}
			}
		}

		.category {
			display: flex;

			.category-right {
				padding: 20rpx;
				width: 100%;

				.category-content {
					font-size: 28rpx;
					line-height: 60rpx;
					color: #666;
				}
			}
		}
	}
</style>